<template>
  <div class="lg:sticky lg:top-[7rem] flex flex-col gap-4">
    <h2 class="font-medium text-[1.25rem] text-[#121212] hidden lg:flex">
      {{ $t('pages.classification') }}
    </h2>
    <div>
      <nuxt-link
        class="hovdrs flex gap-3 justify-between items-center py-3 pr-4 cursor-pointer"
        v-for="item in filteredChild"
        :key="item.code"
        :to="localePath(`/top-up-category/${item.code}`)"
        :class="code == item.code ? 'selectbackground   ' : 'text-[#666666]'"
      >
        <template>
          <div class="flex gap-3 items-center">
            <div class="size-[1.13rem]">
              <img
                v-lazy="$globalFn.imgPrefixUrl(item.pic_image2 || '')"
                alt="Top-up category active icon"
                title="Selected top-up category"
                class="size-full flex-none"
                v-if="code == item.code"
              />
              <img
                v-lazy="$globalFn.imgPrefixUrl(item.pic_image || '')"
                alt="Top-up category icon"
                title="Top-up category thumbnail"
                class="size-full flex-none"
                v-else
              />
            </div>
            <h2 class="font-medium text-[0.88rem] line-clamp-1 capitalize">
              {{ item.name }}
            </h2>
          </div>
          <span class="font-semibold text-[0.88rem] text-[#b3b3b3]">
            {{ item.num || 0 }}
          </span>
        </template>
      </nuxt-link>
    </div>
    <div></div>
  </div>
</template>
<script>
  export default {
    props: {
      showActive: {
        type: Boolean,
        default: true // 是否显示激活状态
      },
      activeId: {
        type: String | Number,
        default: '' // 当前激活的分类ID
      },
      classify: {
        type: Object,
        default: () => null // 分类数据对象
      }
    },
    data() {
      return {
        code: '' // 当前路由参数中的分类ID
      }
    },
    computed: {
      filteredChild() {
        // 过滤分类子项，返回有数量的子项
        return this.classify._child.filter(item => item.num)
      }
    },
    created() {
      // 初始化时从路由参数获取分类ID
      this.code = this.$route.params.code
    },
    methods: {}
  }
</script>
<style lang="less" scoped>
  .selectbackground {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffebe5 100%) !important;
    border-radius: 0 32px 32px 0;
    color: #ff4e33 !important;
  }
  .hovdrs:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #efefef 100%);
    border-radius: 0 32px 32px 0;
    // color: #ff4e33 !important;
    @apply duration-300 transition-colors;
  }
</style>
